<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>会员系统</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
      <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 手机滚动 css 文件 -->
    <link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
    <!-- 开关 CSS 文件 -->
    <link rel="stylesheet" href="css/switch.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="member-wrap clearfix">
         <!-- 左侧导航 -->
         <div class="nav-left" >
            <div class="black-bg"></div>
            <ul>
                <li class="user-info"> 
                    <a href="">
                       <img src="images/user1.png" alt="" >
                       <p>Admin</p>
                    </a>
                </li>
                <li >
                    <a href="index.html">
                       <img src="images/icon1.png" alt="" style="width:25px">
                       <p>会员卡</p>
                    </a>
                </li>
                <li >
                    <a href="charge.html">
                       <img src="images/icon2.png" alt="" style="width:26px">
                       <p>充值</p>
                    </a>
                </li>
                <li >
                    <a href="report.html">
                       <img src="images/icon3.png" alt="" style="width:25px">
                       <p>报表</p>
                    </a>
                </li>
                <li class="active">
                    <a href="integral.html">
                       <img src="images/icon4.png" alt="" style="width:25px">
                       <p>积分兑换</p>
                    </a>
                </li>
                <li >
                    <a href="setting.html">
                       <img src="images/icon5.png" alt="" style="width:30px">
                       <p>设置</p>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 右侧内容 -->
        <div class="member-main" >
            <!-- 顶部导航 -->
            <div class="nav-top clearfix">
                <a href="" class="left">
                   <img src="images/arrow-left.png" alt="">
                </a>
                <span>会员系统</span>
                <a href="" class="right">
                    <img src="images/help.png" alt="">
                </a>
            </div>
            <div class="member-content clearfix">
                <div class="member-content-left" id="mleft">
                    <div class="member-left-top">
                        <h4>积分兑换</h4>
                    </div>
                    <div class="member-left-bottom">
                        <div class="member-la-search">
                            <div class="member-la-sa clearfix" id="member-la-sa" onclick="Show_Hidden(tr2)">
                            查询方式 <span class="yellow">请输入卡号、手机号码</span>
                            </div>
                            <div id="tr2" style="display: none;">
                                <input type="text" placeholder="请输入卡号、手机号码">
                            </div>
                        </div>
                        <ul class="chongzhi-a">
                            <li class="clearfix" >
                                <div class="left">会员</div>
                                <div class="right">无名氏（-）</div>
                            </li>
                            <li class="clearfix">
                                <div class="left">卡类型</div>
                                <div class="right">万利卡</div>
                            </li>
                            <li class="clearfix">
                                <div class="left">卡号</div>
                                <div class="right">365036</div>
                            </li>
                            <li class="clearfix">
                                <div class="left">剩余金额</div>
                                <div class="right">0.00</div>
                            </li>
                            <li class="clearfix">
                                <div class="left">积分余额</div>
                                <div class="right">0.00</div>
                            </li>
                        </ul>
                        
                        <ul class="member-ld-bottom">
                            <li class="clearfix">
                                <div class="left">从右侧选择要兑换的礼品</div>
                            </li>
                        </ul>
                        <div class="member-le table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>礼品名称</th>
                                        <th class="member-le-fr">兑换积分</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>礼品1</td>
                                        <td class="member-le-fr">10</td>
                                    </tr>
                                    <tr>
                                        <td>礼品2</td>
                                        <td class="member-le-fr">13</td>
                                    </tr>
                                    <tr>
                                        <td>礼品1</td>
                                        <td class="member-le-fr">10</td>
                                    </tr>
                                   
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="member-le-total">
                            共 <span class="yellow">0</span> 项，需要 <span class="yellow">0</span> 分
                        </div>
                        <div class="member-ld-chongzhi member-le-dh clearfix">
                            <a href="">兑换</a>
                        </div>
                    </div>
                </div>
                <div class="member-content-right" id="mright">
                    <div class="member-right-top clearfix">
                        <h4>兑换礼品</h4>
                    </div>
                    <div class="member-rd member-re">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>礼品名称</th>
                                        <th class="member-le-fr">兑换积分</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>礼品1</td>
                                        <td class="member-le-fr">10</td>
                                    </tr>
                                    <tr>
                                        <td>礼品2</td>
                                        <td class="member-le-fr">13</td>
                                    </tr>
                                    <tr>
                                        <td>礼品1</td>
                                        <td class="member-le-fr">10</td>
                                    </tr>
                                    <tr>
                                        <td>礼品2</td>
                                        <td class="member-le-fr">13</td>
                                    </tr>
                                    <tr>
                                        <td>礼品1</td>
                                        <td class="member-le-fr">10</td>
                                    </tr>
                                    <tr>
                                        <td>礼品2</td>
                                        <td class="member-le-fr">13</td>
                                    </tr>
                                    <tr>
                                        <td>礼品1</td>
                                        <td class="member-le-fr">10</td>
                                    </tr>
                                    <tr>
                                        <td>礼品2</td>
                                        <td class="member-le-fr">13</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <ul class="page-nav clearfix">
                            <a href="" class="current">1</a>
                            <a href="" class="">2</a>
                            <a href="" class="">3</a>
                            <a href="" class="">4</a>
                            <a href="" class="">5</a>
                            <a href="" class="">6</a>
                            <a href="" class="">7</a>
                            <a href="" class="">8</a>
                            <a href="" class="">9</a>
                        </ul>
                    
                    </div>
                </div>
            </div>
        </div>
    </div> 

    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  
    <script src="js/switch.js"></script>  
    <script src="js/mobiscroll.core-2.5.2.js"></script>
    <script src="js/mobiscroll.select-2.5.1.js"></script>
    <script>
        function alignHeight(eleA,eleB){
          if(!document.getElementById(eleA)){return false;}
          if(!document.getElementById(eleB)){return false;}
          var heightA = document.getElementById(eleA).clientHeight;
          var heightB = document.getElementById(eleB).clientHeight;
          if(heightA > heightB){
            document.getElementById(eleB).style.height = heightA + "px";
            document.getElementById(eleA).style.height = heightA + "px";
          }else{
            document.getElementById(eleA).style.height = heightB + "px";
            document.getElementById(eleB).style.height = heightB + "px";
          }
        }
        window.onload =function z_align(){
            alignHeight("mleft","mright");   
        }
    </script> 

    <script>
        $("[name='my-checkbox']").bootstrapSwitch();
        $(function () {
            $('#member-ld-pay').scroller('destroy').scroller({ preset: 'select' });
    
        });
        function Show_Hidden(trid){
            if(trid.style.display=="block"){
                trid.style.display='none';
                $("#member-la-sa").removeClass("wlk-down");
            }else{
                trid.style.display='block';
                $("#member-la-sa").addClass("wlk-down");
            }
        }
    </script>

</body>
</html>